<template>
  <div class="menu_box">
    <el-menu active-text-color="#ffd04b" background-color="#000000" class="el-menu-vertical-demo" router text-color="#fff"
      :default-active="currentPath" unique-opened :collapse="collapse">
      <div style="display: flex;  padding: 0 20px;">
        <el-icon style="color: white;font-size: 24px;height:60px; line-height: 60px; ">
          <ElemeFilled />
        </el-icon>
        <span class="title_name" v-if="!collapse">智慧停车场</span>
      </div>
      <template v-for="item in menus">
        <!-- 只有一级路由 -->
        <el-menu-item v-if="!item.children" :index="item.meta.path">
          <el-icon>
            <location />
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <el-sub-menu v-else :index="item.meta.path">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <!-- 有二级路由 -->
          <el-menu-item v-for="child in item.children" :index="child.meta.path">
            <el-icon>
              <location />
            </el-icon>
            <span>{{child.meta.title}}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>


    </el-menu>
  </div>
</template>

<script setup lang="ts">
// import { getMenus } from "../router/routes.ts";
import { computed, ref } from 'vue'
import { useStore } from "vuex"
import { useRoute } from "vue-router"
import { getMenus } from "@/router/routes"

const route = useRoute();
const store = useStore();

let currentPath = ref<string>(route.path);
let menus = ref<any>(getMenus());

const collapse = computed(() => {
  return store.state.collapse;
})


// console.log('menus1111', menus);


</script>

<style lang="less" scoped>
.menu_box {
  width: 100%;
  height: 100%;


  .el-menu {

    width: 100%;
    height: 100%;
    border-right: 0;

    .title_name {
      color: #fff;
      width: 120px;
      height: 60px;
      display: block;
      line-height: 60px;
      font-size: 20px;
      text-align: center;
    }
  }

  // .el-menu-vertical-demo:not(.el-menu--collapse) {
  //   width: 200px;
  //   min-height: 400px;
  // }
}
</style>